실행컨텍스트는 어떻게 생겨먹었나

함수가 호출되엇을 때, 함수 내부의 코드가 실행될 수 있도록 만들어진 환경이자, 함수의 결과가 저장되는 영역이다. 함수의 모든 처리는 이 "실행 컨텍스트" 안에서 이뤄진다.

즉 실행 컨텍스트는, 함수 내부에 존재하는 변수나 함수 등, JS엔진이 함수를 실행하기 위한 여러 정보들을 묶은 것이다. 함수 단위로 실행컨텍스트가 존재한다.

왜 실행컨텍스트라는 묶음을 사용할까?

실행컨텍스트 단위로 메모리에 로드되어, 식별자 해결(Identifier Resolution)이 효율적이다. 만약 실행컨텍스트가 아니라, 함수의 변수나 내부의 함수를 따로 메모리에 로드해둔다면, 엔진은 메모리에 접근하여 사용하려는 변수나 함수를 찾아야하기 때문이다. 이렇게되면 엔진 처리도 복잡해지고 시간도 오래걸릴 것이다. JS는 실행 컨텍스트 내부에서만 변수나 함수를 찾으면 된다.

실행컨텍스트 내부 구조

{
  "실행컨텍스트_EC": {
    "렉시컬환경컴포넌트_LEC": {},
    "변수환경컴포넌트_VEC": {},
    "This바인딩컴포넌트_TBC": {}
  }
}

위의 3가지 쓰임을 알면, 실행컨텍스트 동작 원리를 대부분 이해할 수 있게 된다. 자세한 내용은 뒤 포스트에서 진행하니 여기선 간단하게만 알아보자

Lexical Env Component :

가장 중요한 렉시컬 환경 컴포넌트에는 우리가 함수 내부에 선언한 변수나 함수가 담긴다. 뿐만 아니라 실행환경이 선언된 위치의 Scope도 담긴다. 이 렉시컬 환경 컴포넌트 동작을 이해하면, 호이스팅과 스코프체인 그리고 클로저의 원리를 이해할 수 있다
Variable ENV Component :

변수 환경 컴포넌트는 렉시컬 환경의 복원을 위해 존재한다. 함수가 다시 실행될 때, 실행 컨텍스트를 새로 만들고 초기화 하는 것보다, 변수 환경의 값을 렉시컬 환경에 적용함으로써 초기값으로 돌아가는 것이 더 효율적이다.
This Binding Component :

this 키워드를 사용하여 함수를 호출한 오브젝트에 접근할 수 있도록, 함수의 실행 컨텍스트안에 해당 오브젝트를 참조하는 공간을 둔 것이 TBC다.

Call Stack과 Execution Context

자바스크립트의 기본적인 실행 흐름은 콜스택에 실행컨텍스트가 쌓이거나 빠지면서 이뤄진다.

Javascript 엔진은 함수를 실행하기 전, 함수를 실행하기 위한 환경 (실행컨텍스트)을 만든다.
만들어진 실행컨텍스트를 Call Stack에 push하고, 엔진은 방금 삽입한 실행 컨텍스트로 컨트롤을 옮긴다.
실행컨텍스트 초기화를 진행한다.
- 함수 내부에 위치한 변수나 함수를 key-value 형태로 실행 컨텍스트에 저장한다.
초기화 과정이 끝나면 코드를 실행한다.

다음 포스트부터 더 자세히 알아보자